<template>
  <div class="page-bg">
    <el-divider></el-divider>
    <div class="weui-cell">
      <div class="weui-cell__hd"><label class="weui-label">项目名称</label></div>
      <div class="weui-cell__bd cellMargin">
        <div class="weui_cell_bd weui_cell_primary">
          {{name}}
        </div>
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd">
        <label class="weui-label">开始时间</label>
      </div>
      <div class="weui-cell__bd">
        <div class="weui_cell_bd weui_cell_primary">
          <input class="weui_input" type="date" v-model="startTime">
        </div>
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd">
        <label class="weui-label">结束时间</label>
      </div>
      <div class="weui-cell__bd">
        <div class="weui_cell_bd weui_cell_primary">
          <input class="weui_input" type="date" v-model="endTime">
        </div>
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd">
        <label class="weui-label">项目负责人</label>
      </div>
      <div class="weui-cell__bd cellMargin">
        <div class="weui_cell_bd weui_cell_primary">
          {{managerName}}
        </div>
      </div>
    </div>
    <div class="weui-cell weui-cells_form">
      <div class="weui-cell__hd">
        <label class="weui-label">项目主要内容</label>
      </div>
      <el-input
        type="textarea"
        :rows="5"
        placeholder="请输入项目主要内容"
        v-model="content"
        clearable>
      </el-input>
    </div>
    <div class="weui-cell weui-cells_form">
      <div class="weui-cell__hd">
        <label class="weui-label">考核指标</label>
      </div>
      <el-input
        type="textarea"
        :rows="4"
        placeholder="请输入项目考核指标"
        v-model="target"
        clearable>
      </el-input>
    </div>
    <el-divider></el-divider>
    <div class="row">
      <span class="v-center">
          <svg class="icon taskIcon" aria-hidden="true">
            <use xlink:href="#iconmokuai"></use>
          </svg>
          课题安排
        </span>
    </div>
    <el-divider></el-divider>
    <div v-for="item of taskList" :key="item.id" >
      <div class="row" @click="goCheckProjectTask(item.id, item.name)">
          <span class="taskName">
            <svg class="icon projectIcon" aria-hidden="true">
              <use xlink:href="#icondian3"></use>
            </svg>
            {{item.name}}
          </span>
        <span class="delIcon" >
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#iconicon_signal"></use>
            </svg>
            {{item.leaderName}}
          </span>
      </div>
      <el-divider></el-divider>
    </div>
    <div class="weui-btn-area">
      <a href="javascript:;" class="weui-btn weui-btn_primary" @click="okProject=true">通过审核</a>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="okProject"
      width="70%">
      <span>确定通过《{{name}}》的审核吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="okProject = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'checkProjectDetailForm',
  data () {
    return {
      project: '',
      okProject: false,
      taskList: [],
      name: '',
      startTime: '',
      endTime: '',
      content: '',
      target: '',
      managerName: ''
    }
  },
  methods: {
    goCheckProjectTask (id, name) {
      sessionStorage.setItem('taskID', id)
      sessionStorage.setItem('taskName', name)
      this.$router.push('/checkProjectTask')
    },
    getProject () {
      // axios.get('/static/testData/project.json')
      axios.get(this.url + '/project/id/' + sessionStorage.getItem('pid'))
        .then(this.getProjectSucc)
    },
    getProjectSucc (res) {
      res = res.data
      if (res) {
        this.project = res
        this.name = res.name
        this.startTime = res.startTime
        this.endTime = res.endTime
        this.content = res.content
        this.target = res.target
        this.managerName = res.managerName
      }
    },
    getTaskList () {
      // axios.get('/static/testData/module.json')
      axios.get(this.url + '/module/project/' + sessionStorage.getItem('pid'))
        .then(this.getTaskListSucc)
    },
    getTaskListSucc (res) {
      res = res.data
      if (res) {
        this.taskList = res
      }
    },
    submit () {
      this.$axios({
        method: 'put',
        url: this.url + '/project/',
        data: {
          id: parseInt(sessionStorage.getItem('pid')),
          state: this.Run,
          name: this.name,
          managerID: this.project.managerID,
          startTime: this.startTime,
          endTime: this.endTime,
          content: this.content,
          target: this.target
        }
      }).then((res) => {
        if (res.status === 200) {
          alert('提交成功！')
          this.$router.push('/check')
        } else alert(res.data)
      }).catch((err) => {
        alert(err)
      })
      this.okProject = false
    }
  },
  mounted () {
    this.getProject()
    this.getTaskList()
  }
}
</script>

<style lang="stylus" scoped>
  .taskName
    margin-left .2rem
  .row
    margin-top .6rem
    margin-bottom .6rem
  .taskIcon
    margin-right .3rem
    color #16b0ff
  .delIcon
    float right
    margin-right .5rem
  .projectIcon
    margin-right .2rem
</style>
